<template>
<!-- 查看 -->
    <el-dialog 
     title="查看详情"
     @open="open"
     :visible.sync="myShow">

     <div class="learningClass" v-if="learnShow">
        <div>
          <div style="font-size:20px;text-align:center;margin:10px">{{learning.title}}</div>
        </div>
        <el-collapse v-model="activeNames" >         
          <el-collapse-item title="基本信息" name="1">
            <!--<div>开始时间：{{learning.lear.beginTime}}</div>
            <div>结束时间：{{learning.lear.endTime}}</div>
            <div>创建人员：{{learning.lear.createName}}</div>
            <div>活动类别：{{learning.lear.typeName}}</div>-->
            <table class="detailTable">
	            <tr><td>开始时间：{{learning.lear.beginTime}}</td><td>结束时间：{{learning.lear.endTime}}</td></tr>
	            <tr><td>创建人员：{{learning.lear.createName}}</td><td>活动类别：{{learning.lear.typeName}}</td></tr>
	        </table>
          </el-collapse-item>
          <el-collapse-item title="活动详情" name="2">
            <!--<div>参与人员：{{learning.presentPerson}}</div>
            <div>缺席人员：{{learning.absentPerson}}</div>
            <div style="float:left">活动内容：</div>
            <div style="float:left" v-html="learning.lear.learningContent">          
              <div>{{+learning.lear.learningContent}}</div>
            </div> -->
            <el-col :span="4"><strong>参与人员：</strong></el-col>
	        <el-col :span="20">{{learning.presentPerson}}</el-col>
	        <el-col :span="4"><strong>缺席人员：</strong></el-col>
	        <el-col :span="20">{{learning.absentPerson}}</el-col>
	        <el-col :span="4"><strong>活动内容：</strong></el-col>
	        <el-col :span="20">
	            <div style="float:left" v-html="learning.lear.learningContent">          
	              <div>{{+learning.lear.learningContent}}</div>
	            </div>
	        </el-col>
          </el-collapse-item>
          <el-collapse-item title="附件列表" name="3">
            <!--<div  v-for="attachments in learning.attachments" >
              <img src="../assets/fujian1.png" class="downloadGG"> 
              <a :href="baseJs.getSrcUrl('learningAttachmentController/downloadAttachment.do',{'id':attachments.id})">{{attachments.attachmentName }}</a> 
            </div>--> 
            <div  v-for="attachments in learning.attachments" v-if="!/^.*(jpg|gif|bmp|png|JPG|JPEG|PNG|BMP)$/.test(attachments.attachmentAddress)">
	            <img src="../assets/fujian1.png" class="downloadGG"> 
	            <a :href="baseJs.getSrcUrl('learningAttachmentController/downloadAttachment.do',{'id':attachments.id})">{{attachments.attachmentName }}</a> 
	        </div> 
	        <div  v-for="attachments in learning.attachments" v-if="/^.*(jpg|gif|bmp|png|JPG|JPEG|PNG|BMP)$/.test(attachments.attachmentAddress)">
	            <a :href="baseJs.getSrcUrl('learningAttachmentController/downloadAttachment.do',{'id':attachments.id})">
	              <img :src="baseJs.getSrcUrl('learningAttachmentController/downloadAttachment.do',{'id':attachments.id})" class="image" style="width: 100px;height: 100px;margin: 10px 10px 10px 0px;float:left">
	            </a>
	        </div>
          </el-collapse-item>
          <el-collapse-item title="学习讨论" name="4">
            <!--<div v-for="comments in learning.comments" class="learnInfodiv">
              <div>发表人员：{{comments.commentUserName}}</div>
              <div>学习意见：{{comments.commentContent}}</div>
              <div>发表时间：{{comments.commentTime}}</div>
            </div>-->
            <div v-for="comments in learning.comments" class="learnInfodiv">
	          <el-row class="learnInfodiv-row">  
	            <el-col :span="3"><div class="personNameDiv">{{comments.commentUserName}}</div></el-col>
	            <el-col :span="21">
	              <div><strong>学习意见：</strong>{{comments.commentContent}}</div>
	              <div><strong>发表时间：</strong>{{comments.commentTime}}</div> 
	            </el-col>
	          </el-row>
	        </div>
          </el-collapse-item>
        </el-collapse>
        <div slot="footer" class="dialog-footer">
          <el-button :disabled="learning.joinView" @click.native="join">参与学习</el-button>
        </div>
      </div>

      <div class="learningClass" v-else-if="announceShow">
          <div>
            <div style="font-size:20px;text-align:center;margin:10px">{{announcement.title}}</div>
          </div>
          <el-collapse v-model="activeNames" >       
            <el-collapse-item title="基本信息" name="1">
              <!--<div>开始时间：{{announcement.announce.beginTime}}</div>
              <div>结束时间：{{announcement.announce.endTime}}</div>
              <div>创建人员：{{announcement.announce.createName}}</div>-->
              <table class="detailTable">
	            <tr><td>开始时间：</td><td>{{announcement.announce.beginTime}}</td></tr>
	            <tr><td>结束时间：</td><td>{{announcement.announce.endTime}}</td></tr>
	            <tr><td>创建人员：</td><td>{{announcement.announce.createName}}</td></tr>
	          </table>
            </el-collapse-item>
            <el-collapse-item title="活动详情" name="2">
              <!--<div>参与人员：{{announcement.presentPerson}}</div>
              <div>缺席人员：{{announcement.absentPerson}}</div>
              <div style="float:left">通知内容：</div> 
              <div style="float:left" v-html="announcement.announce.announcementContent">          
                <div>{{+announcement.announce.announcementContent}}</div>
              </div>-->
              <el-col :span="4"><strong>参与人员：</strong></el-col>
	          <el-col :span="20">{{announcement.presentPerson}}</el-col>
	          <el-col :span="4"><strong>缺席人员：</strong></el-col>
	          <el-col :span="20">{{announcement.absentPerson}}</el-col>
	          <el-col :span="4"><strong>通知内容：</strong></el-col>
	          <el-col :span="20">
	            <div style="float:left" v-html="announcement.announce.announcementContent">          
	              <div>{{+announcement.announce.announcementContent}}</div>
	            </div>
	          </el-col>
            </el-collapse-item>
            <el-collapse-item title="附件列表" name="3">
              <!--<div  v-for="attachments in announcement.attachments" >
                <img src="../assets/fujian1.png" class="downloadGG">
                <a :href="baseJs.getSrcUrl('announcementAttachmentController/downloadAttachment.do',{'id':attachments.id})">{{attachments.attachmentName }}</a>
              </div>-->
              <div  v-for="attachments in announcement.attachments" v-if="!/^.*(jpg|gif|bmp|png|JPG|JPEG|PNG|BMP)$/.test(attachments.attachmentAddress)">
	            <img src="../assets/fujian1.png" class="downloadGG"> 
	            <a :href="baseJs.getSrcUrl('announcementAttachmentController/downloadAttachment.do',{'id':attachments.id})">{{attachments.attachmentName }}</a> 
	          </div> 
	          <div  v-for="attachments in announcement.attachments" v-if="/^.*(jpg|gif|bmp|png|JPG|JPEG|PNG|BMP)$/.test(attachments.attachmentAddress)">
	            <a :href="baseJs.getSrcUrl('announcementAttachmentController/downloadAttachment.do',{'id':attachments.id})">
	              <img :src="baseJs.getSrcUrl('announcementAttachmentController/downloadAttachment.do',{'id':attachments.id})" class="image" style="width: 100px;height: 100px;margin: 10px 10px 10px 0px;float:left">
	            </a>
	          </div>
            </el-collapse-item>
            <el-collapse-item title="通知讨论" name="4">
              <!--<div v-for="comments in announcement.comments" class="learnInfodiv">
                <div>发表人员：{{comments.commentUserName}}</div>
                <div>反馈意见：{{comments.commentContent}}</div>
                <div>发表时间：{{comments.commentTime}}</div>
              </div>-->
                <div v-for="comments in announcement.comments" class="learnInfodiv">
		          <el-row class="learnInfodiv-row">  
		            <el-col :span="3"><div class="personNameDiv">{{comments.commentUserName}}</div></el-col>
		            <el-col :span="21">
		              <div><strong>学习意见：</strong>{{comments.commentContent}}</div>
		              <div><strong>发表时间：</strong>{{comments.commentTime}}</div> 
		            </el-col>
		          </el-row>
		        </div>
            </el-collapse-item>
          </el-collapse>
          <div slot="footer" class="dialog-footer">
            <el-button :disabled="announcement.buttonView" @click.native="join">参与办公</el-button>
          </div>
      </div> 

    </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { getOtherDepart} from '../api/api';
import { checkAnnounceList,joinWork} from '../api/annoucement';
import { joinLearn,checkLearnList} from '../api/learning';
export default {
    data() {
      return {
        myShow:this.show,
        learnShow:false,
        announceShow:false,
        activeNames:['1','2'],        
        learning:{
          title:'',
          lear:{},
          attachments:[],
          comments:[],
          joinView:false,
          ynjoin:[],
        },
        announcement:{
          title:'',
          announce:{},
          attachments:[],
          comments:[],
          buttonView:false,
          ynjoin:[],
        },        
      }
    },
    computed: {
       ...mapGetters([
        'userId'
      ])
    },
    props:{
      show: {
        type: Boolean,
        default: false
      },
      id: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      }
    },
    watch: {
      show(val) {
        this.myShow = val;
      },
      myShow(val){
        this.$emit("close",val);
      },
      type(val) {
        if(val === 'learn'){
          this.learnShow = true;
          this.announceShow =!this.learnShow;
        }else if(val === 'announcement'){
          this.announceShow = true;
          this.learnShow =! this.announceShow;
        }
      },
     /* id(val){
        this.learning.id=val;
      }*/
    },
    methods:{
    	// open(){
     //    this.learningOpen();
     //  },
      open(){
        var para ={
          id:this.id,
        };
        if(this.learnShow){
          checkLearnList(para).then(res =>{
            this.learning.ynjoin=res.obj.presentPersonId.split(",");
            console.log(this.userId);
            for(let i=0;i<this.learning.ynjoin.length;i++){
              if(this.learning.ynjoin[i]==this.userId){
                this.learning.joinView=true;
                break;
              }else{
                this.learning.joinView=false;                
              }                   
            }
            this.learning.presentPerson=res.obj.presentPerson;
            this.learning.absentPerson=res.obj.absentPerson;
            this.learning.title=res.obj.learning.title;
            this.learning.lear=res.obj.learning;               
            this.learning.attachments=res.obj.attachments;
            this.learning.comments=res.obj.comments;
          });
        }else if(this.announceShow){
          checkAnnounceList(para).then(res =>{
            this.announcement.ynjoin=res.obj.presentPersonId.split(",");
            console.log(this.userId);
            for(let i=0;i<this.announcement.ynjoin.length;i++){
              if(this.announcement.ynjoin[i]==this.userId){
                this.announcement.buttonView=true;
                break;
              }else{
                this.announcement.buttonView=false;                
              }                     
            }
            this.announcement.presentPerson=res.obj.presentPerson;
            this.announcement.absentPerson=res.obj.absentPerson;
            this.announcement.title=res.obj.announcement.title;
            this.announcement.announce=res.obj.announcement;               
            this.announcement.attachments=res.obj.attachments;
            this.announcement.comments=res.obj.comments;
          });
        }
        
      },
      //参与学习
      //发表学习意见
      join() {
        this.$prompt('请发表学习意见', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          if(!value)
            { this.$alert('学习意见不能为空!','错误',{ type: 'error'});}
          else{
          if(this.learnShow){
            this.learning.joinView=true;
            let para={ learningId: this.id,commentContent:value };
            joinLearn(para).then(()=>{
              this.open();
            });
          }else if(this.announceShow){
            this.announcement.buttonView=true;
            let para={ announcementId: this.id,commentContent:value };
            joinWork(para).then(()=>{
              this.open();
            });
          }         
          
        }
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
    },
    activated(){

    },
}
  

</script>
<style lang="scss" scope>
@import "../style/mixin.scss";
  .task-dialog{
    .el-dialog__headerbtn .el-icon-close{top: 20px;right: 16px;}
    .el-dialog{width: 800px;height:600px;background-color:#f8f9fa}
    .el-dialog__header{@include paddingCs(10px 0 0,'')}
  }
  .downloadGG{
    width:12px;
    height:12px;
  }
  .learnInfodiv{
    /*border-bottom:1px solid #E0EEEE;*/
    .learnInfodiv-row{
      border-bottom: 1px solid #E0EEEE;
      margin-bottom: 5px;
    }
    /*border-bottom:1px solid #E0EEEE;*/
    .personNameDiv{
        color: rgb(255, 255, 255);
        display: block;
        border-radius: 100%;
        cursor: pointer;
        background-color: rgb(63, 169, 247);
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
        /*margin: 20px 0;*/
      }
  }
  .dialog-footer{
    float: right;
    margin: 10px 0 10px;
  }
  .detailTable{
      width: 100%;min-height: 36px;line-height: 36px;text-align: center;border-collapse: collapse;
      td{
        padding: 5px;
        border: 1px solid rgba(0,0,0,.12);
      }
    }
</style>
